<template>
  <n-space
    vertical
    size="large"
    style="margin: 0px; height: 100%; width: 100%"
    content-style="padding: 0px; margin: 0px"
  >
    <n-layout
      :style="{ height: `${innerHeight}px`, padding: '0px', margin: '0px' }"
      content-style="padding: 0px; margin:0px;"
    >
      <n-layout-content content-style="padding: 0px;margin: 0px;">
        <n-form
          ref="formRef"
          :model="model"
          :rules="rules"
          style="margin: 40px 40px 40px 40px"
          size="large"
        >
          <n-form-item label="名称" path="name">
            <n-input placeholder="Input" v-model:value="model.name" />
          </n-form-item>
          <n-form-item label="主机名" path="host">
            <n-input placeholder="Input" v-model:value="model.host" />
          </n-form-item>
          <n-form-item label="端口号" path="port">
            <n-input placeholder="Input" v-model:value="model.port" />
          </n-form-item>
          <n-form-item label="账号" path="user">
            <n-input placeholder="Input" v-model:value="model.user" />
          </n-form-item>
          <n-form-item label="密码" path="password">
            <n-input placeholder="Input" v-model:value="model.password" />
          </n-form-item>
          <n-form-item label="数据库" path="database">
            <n-input placeholder="Input" v-model:value="model.database" />
          </n-form-item>
          <n-form-item>
            <div style="position: absolute; right: 0px">
              <n-button
                style="margin: 10px; width: 120px"
                @click="onCannelClicked"
                >取消</n-button
              >
              <n-button
                style="margin-right: 40px; width: 120px"
                type="success"
                @click="onConfirmClicked"
                >确定</n-button
              >
            </div>
          </n-form-item>
        </n-form>
      </n-layout-content>
      <!-- <n-layout-footer>
        <div style="position: absolute; right: 0px">
          <n-button style="margin: 10px; width: 120px" @click="onCannelClicked"
            >取消</n-button
          >
          <n-button style="margin-right: 40px; width: 120px" type="success"
            >确定</n-button
          >
        </div>
      </n-layout-footer> -->
    </n-layout>
  </n-space>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import useLinkRepositories from "../composables/useLinkRepositories";
import useWindowSize from "../composables/useWindowSize";
import IPC from "../background/ipc";
import Constants from "../contants";

const defaultLink = {
  id: "",
  name: "",
  host: "",
  port: "3306",
  user: "root",
  password: "",
  database: "demo",
};

export default defineComponent({
  setup() {
    const like = ref("");

    const formRef = ref(null);

    const router = useRouter();

    const model = ref(defaultLink);

    const type = ref(router.currentRoute.value.query.type);

    const linkId = ref(router.currentRoute.value.query.linkId);

    const winId = ref(router.currentRoute.value.query.winId);

    const { innerHeight } = useWindowSize();

    const { getLink, addLink, updateLink } = useLinkRepositories(like);

    const onCannelClicked = async () => {
      IPC.invoke("window.closed", { winId: winId.value });
    };

    const onConfirmClicked = async () => {
      //await IPC.invoke("link.add", { linkInfo: model });
      if (type.value == "edit") {
        updateLink(model.value);
      } else {
        await addLink(model.value);
      }

      IPC.send({ action: Constants.REFRESH_LINK_ENENT });
      IPC.invoke("window.closed", { winId: winId.value });
    };

    onMounted(async () => {
      if (type.value == "edit") {
        let data = await getLink(linkId.value);
        console.log("getLinkInner");
        console.log(data);
        model.value = data;
      } else {
        model.value = defaultLink;
      }
    });

    return {
      formRef,
      type,
      linkId,
      innerHeight,
      model,
      onCannelClicked,
      onConfirmClicked,
      rules: {
        name: {
          required: true,
          trigger: ["blur", "input"],
          message: "请输入连接名称",
        },
        host: {
          required: true,
          trigger: ["blur", "input"],
          message: "请输入主机名",
        },
        port: {
          required: true,
          trigger: ["blur", "input"],
          message: "请输入端口号",
        },
        user: {
          required: true,
          trigger: ["blur", "input"],
          message: "请输入账号",
        },
        password: {
          required: true,
          trigger: ["blur", "input"],
          message: "请输入密码",
        },
        database: {
          required: true,
          trigger: ["blur", "input"],
          message: "请输入数据库",
        },
      },
    };
  },
});
</script>
